<template>
  <h1>EL-日期时间选择器组件</h1>
  <el-date-picker
    v-model="rq"
    type="date"
    placeholder="选择日期"
    @change="console.log(rq)"
    format="YYYY/MM/DD"
    value-format="YYYY-MM-DD">
  </el-date-picker>
  <br>
  <el-date-picker
    v-model="sj"
    type="datetime"
    placeholder="选择日期"
    @change="console.log(sj)"
    format="YYYY/MM/DD HH/mm/ss"
    value-format="YYYY-MM-DD HH:mm:ss">
  </el-date-picker>
  <br>
  <el-date-picker
    v-model="time"
    type="datetimerange"
    @change="f"
    format="YYYY/MM/DD HH/mm/ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    range-separator="至">
  </el-date-picker>
</template>

<script setup>
// 定义变量用来保存选择的日期
import {ref} from "vue";

const rq = ref('');
// 定义变量用来保存选择的时间
const sj = ref('');
// 定义变量用来保存选择的时间段
const time = ref([]);
const f = () => {
  console.log(time.value[0]);
  console.log(time.value[1]);
}
</script>


<style scoped>

</style>
